<script setup lang="ts">

import type {OrderPO} from "~/pojo/po/OrderPO";

let route=useRoute()
let date=new Date(route.query.time as string);
let tripId=route.query.id as string;
let quickConfirm=route.query.quickConfirm;

const avatar:Ref<string|null> =ref('');
const rawPhone:Ref<string>=ref('');
const rawPlain:Ref<string>=ref('');
const rawCostTime:Ref<number>=ref(0);
const rawCost:Ref<number>=ref(0);
const rawDriverUseralias:Ref<string>=ref('');

const status:Ref<string>=ref(route.query.status as string);

let config=useRuntimeConfig()
function replaceURL(url:string):string{
  if(url===config.public.defaultUserAvatarURL)return url
  return config.public.enableReplaceImgURL?url.replace(config.public.oldImgHost,config.public.newImgHost):url
}
onMounted(function (){
  cFetch<OrderPO>(`/order/api/view/order/${tripId}`,{
    auth:true,
    defaultOpts:{
      method: 'POST',
    }
  }).then(res=>{
    avatar.value=res.data[0].driverAvatar
    rawPhone.value=res.data[0].driverPhone
    rawPlain.value=res.data[0].carNumber
    rawCostTime.value=res.data[0].estimatedTime
    rawCost.value=res.data[0].cost
    rawDriverUseralias.value=res.data[0].driverUseralias
  })
})
function freeRide(){
  cFetch(`/stroke/api/freeride/${tripId}`,{
    auth:true,
    defaultOpts:{
      method: 'POST',
    }
  }).then(res=>{
    if(res.code===200){
      showToast('已下车并生成订单，请及时支付')
      bottomBarStore().index=2
      navigateTo('/bills')
    }
  })
}
function hiker(){
  cFetch(`/stroke/api/hitchhiker/${tripId}`,{
    auth:true,
    defaultOpts:{
      method: 'POST',
    }
  }).then(res=>{
    if(res.code===200){
      status.value='2'
    }
    showToast('已上车')
  })
}
</script>

<template>
  <div class="main">
    <div class="info">
      <h2 style="color: green;text-align: center;margin: 11px 0;">已确认同行</h2>
      <p>出发地：{{route.query.from}}</p>
      <p>目的地：{{route.query.to}}</p>
      <p>出发时间：{{date.getFullYear()}}年{{date.getMonth()+1}}月{{date.getDate()}}日 {{date.getHours().toString().padStart(2,'0')}}:{{date.getMinutes().toString().padStart(2,'0')}}</p>
      <p style="color: seagreen" v-if="quickConfirm==='1' ">【快速确认】</p>
    </div>

    <div class="driver-info">
      <h2 style="text-align: center;margin: 13px 0;">司机信息</h2>
      <div class="info-detail">
        <div class="driver-avatar">
          <van-image
              round
              width="3.7rem"
              height="3.7rem"
              fit="cover"
              :src="replaceURL(avatar?avatar:config.public.defaultUserAvatarURL)"
          />
        </div>
        <div class="info-content">
          <h3 style="margin: 6px 0">{{ rawDriverUseralias }}</h3>
          <span>联系电话：<span class="font-c">{{ rawPhone }}</span></span>
          <span>车牌号码：<span class="font-c">{{ rawPlain }}</span></span>
          <span>预计费用：<span class="font-c">¥{{ rawCost }}</span></span>
          <span>预计耗时：<span class="font-c">{{ Math.ceil(rawCostTime/60) }}分钟</span></span>
        </div>

      </div>
      <van-button class="action" v-if="status==='1' " @click="hiker">上车</van-button>
      <van-button class="action" v-else-if="status==='2' " type="primary" @click="freeRide">下车</van-button>

    </div>
  </div>
</template>

<style scoped>
.main{
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info{
  border-radius: 12px;
  background-color: RGB(227,231,228);
  padding: 14px;
  border: 1px solid gray;
  width: 80%;
  margin: 20px auto;
}
.driver-info{
  width: 80%;
  margin: 20px auto;
  background-color: RGB(227,231,228);
  border-radius: 14px;
  padding: 14px;
  border: 1px dotted gray;
}
.info-detail{
  display: flex;
  flex-direction: row;
  background-color: whitesmoke;
  border-radius: 12px;
}
.driver-avatar{
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.info-content{
  display: flex;
  flex: 3.5;
  flex-direction: column;
}
.font-c{
  color: RGB(184,134,11);
}
.action{
  margin-top: 15px;
  position: relative;
  left: 80%;
}
</style>